<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background: gray;
			}
			
			.max{
				width: 400px;
				height: 400px;
				margin:200px auto;			
			}
			
			.box{
				width: 200px;
				height: 200px;
				perspective: 1200px;
				transform-style: preserve-3d;
				position: relative;
				margin:100px auto;
				transition: 1s;
				animation: rotate 3s linear infinite;
			}
			
			.box img{
				position: absolute;
				left: 50px;
				top: 50px;
			}
			
			.box img:nth-of-type(1){
				transition: 1s;
				animation: boom1 1s infinite linear alternate;
				transform: translateZ(100px) rotateY(0deg);
			}
			
			.box img:nth-of-type(2){
				transition: 1s;
				animation: boom2 1s infinite linear  alternate;
				transform: translateX(50px) translateZ(50px) rotateY(90deg);
			}
			
			.box img:nth-of-type(3){
				transition: 1s;
				animation: boom3 1s infinite linear  alternate;
				transform:translateX(-50px) translateZ(50px) rotateY(-90deg);
			}
			
			.box img:nth-of-type(4){
				transition: 1s;
				animation: boom4 1s infinite linear  alternate;
				transform:translateZ(50px) translateY(-50px) rotateX(-90deg);
			}
			
			.box img:nth-of-type(5){
				transition: 1s;
				animation: boom5 1s infinite linear  alternate;
				transform:translateZ(50px) translateY(50px) rotateX(90deg);
			}
			
			.box img:nth-of-type(6){
				transition: 1s;
				animation: boom6 1s infinite linear  alternate;
			}
			
			.box:hover{
				transform: rotateX(-30deg) rotateY(-60deg);
			}
			
			@keyframes boom1{
				0%{transform: translateZ(100px) rotateY(0deg);}
				100%{transform: translateZ(200px) rotateY(0deg);}
			}
			
			@keyframes boom2{
				0%{transform: translateX(50px) translateZ(50px) rotateY(90deg);}
				100%{transform: translateX(150px) translateZ(50px) rotateY(90deg);}
			}
			
			@keyframes boom3{
				0%{transform: translateX(-50px) translateZ(50px) rotateY(-90deg);}
				100%{transform: translateX(-150px) translateZ(50px) rotateY(-90deg);}
			}
			
			@keyframes boom4{
				0%{transform: translateZ(50px) translateY(-50px) rotateX(-90deg);}
				100%{transform: translateZ(50px) translateY(-150px) rotateX(-90deg);}
			}
			
			@keyframes boom5{
				0%{transform: translateZ(50px) translateY(50px) rotateX(90deg);}
				100%{transform: translateZ(50px) translateY(150px) rotateX(90deg);}
			}
			
			@keyframes boom6{
				0%{transform: translateZ(0px) translateY(0px) rotateX(0deg);}
				100%{transform: translateZ(-100px) translateY(0px) rotateX(0deg);}
			}
					
			@keyframes rotate{
				0%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
				100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
			}
		</style>
	</head>
	<body>
		<div class="max">
			<div class="box">
				<img title="1" src="images/boom.jpg"/>
				<img title="2" src="images/boom.jpg"/>
				<img title="3" src="images/boom.jpg"/>
				<img title="4" src="images/boom.jpg"/>
				<img title="5" src="images/boom.jpg"/>
				<img title="6" src="images/boom.jpg"/>
			</div>
		</div>
	</body>
</html>
